<template>
  <tabs :items="tabsList" v-model="activeName">
    <template #infoForm>
      <!-- 基本信息 -->
      <ma-form
        ref="infoForm"
        v-model="ModelInfo"
        @ok="submitInfo"
        labelPosition="left"
        label-width="80"
        style="width: 640px"
      >
        <el-form-item label="商品类型" prop="name">
          <el-radio-group v-model="ModelInfo.radio1">
            <el-radio value="1" size="large" border>卡密商品</el-radio>
            <el-radio value="2" size="large" border>虚拟商品</el-radio>
            <el-radio value="3" size="large" border>普通商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ModelInfo.name" />
        </el-form-item>
        <el-form-item label="商品简称" prop="name">
          <el-input v-model="ModelInfo.name" />
        </el-form-item>
        <el-form-item label="商品目录" prop="name">
          <el-cascader :props="catalogue" />
        </el-form-item>
        <el-form-item label="充值模板" prop="name">
          <el-select v-model="ModelInfo.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品面值" prop="name">
          <el-input-number v-model="ModelInfo.value" />
        </el-form-item>
        <el-form-item label="商品成本" prop="name">
          <el-input-number v-model="ModelInfo.value" />
        </el-form-item>
        <el-form-item label="商品图片" prop="name">
          <MaUploadImage v-model="ModelInfo.img" />
        </el-form-item>
        <el-form-item label="商品视频" prop="name">
          <MaUploadImage v-model="ModelInfo.vido" />
        </el-form-item>
        <el-form-item label="定价类型" prop="name">
          <el-radio-group v-model="ModelInfo.moneyType">
            <el-radio value="1" size="large">定价模版</el-radio>
            <el-radio value="2" size="large">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="定价模版"
          prop="name"
          v-if="ModelInfo.moneyType === '1'"
        >
          <el-select v-model="ModelInfo.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-table :data="tableMoney" style="width: 100%; margin-top: 15px">
            <el-table-column prop="name" label="级别" />
            <el-table-column prop="num" label="售价" />
          </el-table>
        </el-form-item>
        <el-form-item
          label="自定义价格"
          prop="name"
          v-if="ModelInfo.moneyType === '2'"
        >
          组件
          <el-table :data="tableMoney" style="width: 100%; margin-top: 15px">
            <el-table-column prop="name" label="级别" />
            <el-table-column prop="num" label="售价" />
          </el-table>
        </el-form-item>
        <el-form-item label="商品状态" prop="name">
          <el-select v-model="ModelInfo.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="下单模版" prop="name">
          <el-select v-model="ModelInfo.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </ma-form>
    </template>
    <!-- 库存管理 -->
    <template #inventoryForm>
      <ma-form ref="inventoryForm" v-model="ModelInventory">
        <el-button type="primary" @click="dialogInventory = true"
          >添加库存</el-button
        >
        <el-table :data="tableKucun" style="width: 100%; margin-top: 15px">
          <el-table-column prop="num" label="关联库存" />
          <el-table-column prop="num" label="商品ID" />
          <el-table-column prop="num" label="类型" />
          <el-table-column prop="num" label="进价" />
          <el-table-column prop="num" label="库存" />
          <el-table-column prop="num" label="权重" />
          <el-table-column prop="num" label="操作">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="dialogInventory = true"
                >编辑</el-button
              >
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </ma-form>
      <el-dialog
        width="500px"
        v-model="dialogInventory"
        title="Shipping address"
      >
        <el-form>
          <el-form-item label="供货方式" label-width="80">
            <el-radio-group v-model="dialogInventoryForm.radio1">
              <el-radio value="1" size="large" border>本体供货</el-radio>
              <el-radio value="2" size="large" border>货源渠道</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库存名称" label-width="80">
            <el-input
              disabled
              v-model="dialogInventoryForm.name"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="本地卡库" label-width="80">
            <el-select v-model="dialogInventoryForm.value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="货源渠道" label-width="80">
            <el-select v-model="dialogInventoryForm.value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品编号" label-width="80">
            <el-input v-model="dialogInventoryForm.name" autocomplete="off">
              <template #append>
                <el-button type="primary">查询</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
    <!-- 富文本 -->
    <template #distrForm>
      <Editor v-model="ModelDistr"></Editor>
    </template>
    <!-- 富文本 -->

    <template #attentionForm>
      <Editor v-model="ModelAttention"></Editor>
    </template>
    <!-- 商品配置 -->
    <template #configForm>
      <ma-form ref="configForm" v-model="ModelConfig" style="width: 640px;">
        <el-form-item label="购买限制" prop="name">
          <div style="display: flex; align-items: center">
            <el-input-number v-model="ModelConfig.name" />
            <span style="padding: 0 20px">-</span>
            <el-input-number v-model="ModelConfig.name" />
          </div>
        </el-form-item>

        <el-form-item label="购买次数" prop="name">
          <el-input-number v-model="ModelConfig.name" />
        </el-form-item>

        <el-form-item label="是否质保" prop="name">
          <el-switch
            v-model="ModelConfig.value1"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>

        <el-form-item label="质保天数" prop="name"
          v-if="ModelConfig.value1 === '1'"
        >
          <el-input-number v-model="ModelConfig.name" />
        </el-form-item>

        <el-form-item label="限购策略" prop="name">
          <el-select v-model="ModelConfig.value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="余额支付" prop="name">
          <el-switch
            v-model="ModelConfig.value1"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>

        <el-form-item  label="余额限购" prop="name" >
          <el-input-number v-model="ModelConfig.name" />
        </el-form-item>

        <el-form-item label="可售渠道" prop="name">
          <el-cascader :props="catalogue" />
        </el-form-item>

        <el-form-item label="禁售渠道" prop="name">
          <el-cascader :props="catalogue" />
        </el-form-item>
      </ma-form>
    </template>
  </tabs>
</template>

<script setup lang="ts">
import type { CascaderProps } from "element-plus";
import { create, save } from "~/base/api/user.ts";
import useForm from "@/hooks/useForm.ts";
import { ResultCode } from "@/utils/ResultCode.ts";
import tabs from "@/components/y-tabs/index.vue";
import MaUploadImage from "@/components/ma-upload-image/index.vue";
import Editor from "@/components/ma-editor/index.vue";

defineOptions({ name: "permission:user:form" });
let activeName = ref<any>("infoForm");
let tabsList = reactive([
  {
    label: "基本信息",
    name: "infoForm",
  },
  {
    label: "库存管理",
    name: "inventoryForm",
  },
  {
    label: "商品详情",
    name: "distrForm",
  },
  {
    label: "注意事项",
    name: "attentionForm",
  },
  {
    label: "商品配置",
    name: "configForm",
  },
]);
const { formType = "add", data = null } = defineProps<{
  formType: "add" | "edit";
  data?: any;
}>();

const t = useTrans().globalTrans;

const ModelInfo = ref<any>({});
const ModelInventory = ref<any>({});
const ModelDistr = ref<any>("");
const ModelAttention = ref<any>("");
const ModelConfig = ref<any>({});

const infoForm = ref<any>('');
const inventoryForm = ref<any>('');
const configForm = ref<any>('');

let dialogInventory = ref<boolean>(false);
let dialogInventoryForm = ref<any>({});

const tableMoney = ref<any>([]);
const tableKucun = ref<any>([]);
const options = ref<any>([
  {
    value: "Option1",
    label: "Option1",
  },
]);

useForm("infoForm").then((form: any) => {
  if (formType === "edit" && data) {
    Object.keys(data).map((key: string) => {
      ModelInfo.value[key] = data[key];
    });
  }
  form.setOptions({
    labelWidth: "90px",
  });
});

// 创建操作
function add(): Promise<any> {
  return new Promise((resolve, reject) => {
    create(ModelInfo.value)
      .then((res: any) => {
        res.code === ResultCode.SUCCESS ? resolve(res) : reject(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

// 更新操作
function edit(): Promise<any> {
  return new Promise((resolve, reject) => {
    save(ModelInfo.value.id as number, ModelInfo.value)
      .then((res: any) => {
        res.code === ResultCode.SUCCESS ? resolve(res) : reject(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

defineExpose({
  add,
  edit,
  maForm: "xxxxx",
});

let idcascade = 0;
const catalogue: CascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++idcascade,
        label: `Option - ${idcascade}`,
        leaf: level >= 2,
      }));
      // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
      resolve(nodes);
    }, 1000);
  },
};

// 保存
const submitInfo = () => {};
</script>

<style scoped lang="scss"></style>
